import { useState, useEffect } from "react";
import { Button, Table } from "antd";
import { CloseOutlined } from "@ant-design/icons";
import { resourcePath } from "../../../../../../../utils/resource";
import CztApi from "../../../../../../../utils/apis/CztApi";
import { fromCircle } from "ol/geom/Polygon";
export default function CztXq(props) {
    const { result, cztfx, geom, onUpdateCztList } = props
    const [datas, setDatas] = useState();
    const [loading, setLoading] = useState(false); // 新增 loading 状态
    console.log('geom',geom)
    useEffect(() => {
        setLoading(true)
        CztApi.cztxq(cztfx, geom).then(resp => {
            setDatas(resp.data);
        }).finally(()=>{
            setLoading(false)
        })
    }, [cztfx, geom])

    const handleClick = (record) => {
        console.log('cztxq',record)
        onUpdateCztList(record) 
    }
    // console.log('result',result)
   

    return <div style={{
        width: 350,
        position: "absolute",
        right: 30,
        top: 30,
        bottom: 30,
        background: 'rgba(1,15,31,0.5)',
        // border: '1px solid rgba(9,107,225,0.8)',
        pointerEvents: 'auto',
        overflow: "auto",
        borderRadius: 8
    }} className="layout-v">
        <div style={{
            fontSize: 20,
            fontWeight: "bold",
            marginBottom: 12
        }} className='layout-h center'>
            <div className='fill w0'>
                <div style={{
                    background: `url(${resourcePath.blockTitleBg})`,
                    height: 36,
                    backgroundSize: '100% 100%',
                    fontSize: 18,
                    lineHeight: '36px',
                    paddingLeft: 12,
                    fontWeight: "bold",
                    overflow: "hidden"
                }}
                >
                    {cztfx}
                </div>
            </div>
            <div>
                <Button size="small" icon={<CloseOutlined />} style={{
                    // color: "#fff"
                }} onClick={e => {
                    props.onClose?.()
                }} />
            </div>
        </div>
        <Table style={{ marginTop: 10 }}
            columns={[{
                title: '名称',
                dataIndex: 'title'
            }, 
            {
                width: 80,
                render: (text, record) => {
                    return <Button size="small" type="link" onClick={() => handleClick(record)}>详情</Button>
                }
            }
            ]}
            dataSource={datas}
            loading={loading} />
    </div>

}